import React from 'react'
import { FC } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'

interface PageProps {
  title: string
  content: string
  cancelText?: string
  confirmText?: string
  onCancel: () => void
  onConfirm: () => void
  isOpened: boolean
}
const Modal: FC<PageProps> = ({
  title,
  content,
  cancelText = '取消',
  confirmText = '确定',
  onCancel,
  onConfirm,
  isOpened
}) => {
  return (
    <View>
      {isOpened && (
        <View className='curtain'>
          <View className='model  c-absolute white-bgc'>
            <View className='model-header b-bottom'>{title}</View>
            <View className='model-content'>{content}</View>
            <View className='model-footer'>
              <View className='model-footer__action flex'>
                <View
                  className='model-footer__action-btnLeft action-btn--defalut'
                  onClick={() => {
                    onCancel()
                  }}
                >
                  {cancelText}
                </View>
                <View
                  className='model-footer__action-btnRight action-btn--defalut'
                  onClick={() => {
                    onConfirm()
                  }}
                >
                  {confirmText}
                </View>
              </View>
            </View>
          </View>
        </View>
      )}
    </View>
  )
}

export default Modal
